<template>
	<view class="vip">
		<g-navbar backgroundColor="none" fontColor="#fff" />
		<view class="vip-content-container">
			<view class="title">
				会员尊享好礼
			</view>
			<view class="content">
				<view class="content-item">
					<rich-text :nodes="vipDetail.detail" />
				</view>

				<!-- 	<view class="content-item" v-for="item in 1">
					1. 哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩哔哩
				</view> -->
			</view>
		</view>
		<view class="open-vip-bar" v-if="vipDetail.id">
			<view class="vip-label">
				<view class="label">
					<g-auto-zoom-text>{{vipDetail.name}}</g-auto-zoom-text>
				</view>
				<view class="desc">
					<g-auto-zoom-text>（交易笔笔返现）</g-auto-zoom-text>
				</view>
			</view>
			<view class="open-btn" @click="placeVipOrder">
				<g-auto-zoom-text>¥{{vipDetail.retail_price}}/立即开通</g-auto-zoom-text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import REST_URL from '@/http/http.restUrl';
	import { IVipEquityResult, IPlaceVipOrderOptions } from './types';
	import { reactive, ref, Ref, computed } from 'vue';
	import { removeHTMLTag, escape2Html } from '@/utils';
	import global from '@/global';
	import type { IPayOption } from '@/global';
	import { useStore } from 'vuex';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { PAY_WAY_TYPE } from '@/enum/pay';
	import { ROUTE_TYPE } from '@/enum/router';


	const store = useStore();

	const vipDetail : Ref<IVipEquityResult> = ref({
		name: '',
		detail: '',
		retail_price: '',
	})

	const placeVipOrderOptions : IPlaceVipOrderOptions = reactive({
		customer_id: store.getters[GET_STORE_USERINFO].id,
		product_id: 0,
		pay_type: PAY_WAY_TYPE.WECHAT,
	})



	const contentFormat = (content : string) : string => {
		const str : string = escape2Html(removeHTMLTag(content)).trim();
		const temp : string[] = [];
		for (let item of str) {
			if (item.trim()) {
				temp.push(item);
			}
		}
		return temp.join('');
	}

	const getVipEquity = async () => {
		const result : IVipEquityResult = (await uni.http.POST(REST_URL.getVipEquity)).data;
		vipDetail.value = result;
		// console.log(contentFormat(vipDetail.value.detail))
		placeVipOrderOptions.product_id = vipDetail.value.id!;
	}

	const sheelNameList = computed(() => {
		const list : string[] = [];
		for (let key in global.payOptionList) {
			list.push(global.payOptionList[key].name);
		}
		return list
	})

	const selectPayWay = () => {
		uni.showActionSheet({
			itemList: sheelNameList.value,
			success: (res) => {
				const current : IPayOption = global.payOptionList[(Object.values(global.payOptionList).find((item : IPayOption) => item.name === sheelNameList.value[res.tapIndex])).type];
				placeVipOrderOptions.pay_type = current.type;
				placeVipOrder();
			},
		});
	}


	const placeVipOrder = async () => {
		const result = (await uni.http.POST(REST_URL.placeVipOrder, placeVipOrderOptions)).data;
		console.log(result)
		switch (result.pay_type) {
			case PAY_WAY_TYPE.BALANCE:
				// jumpDetail(result.order_num);
				break;
			case PAY_WAY_TYPE.WECHAT:
				jumpCheckstand(result.order_num);
				break;
			case PAY_WAY_TYPE.ALIPAY:
				break;
		}
	}

	const jumpDetail = (orderNum : string) => {
		uni.router.route({
			url: '/pages_mall/order_detail/orderDetail',
			type: ROUTE_TYPE.REDIRECTTO,
			params: {
				orderNum
			}
		})
	}

	const jumpCheckstand = (orderNum : string) => {
		uni.router.route({
			url: '/pages_mall/checkstand/checkstand',
			type: ROUTE_TYPE.REDIRECTTO,
			params: {
				orderNum
			}
		})
	}




	getVipEquity();
</script>

<style scoped lang="scss">
	@import "./vip.scss";
</style>